<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
	<div>
		<!-- 头部 s -->
		<div class="d-flex jc-center title_wrap">
			<div class="zuojuxing"></div>
			<div class="youjuxing"></div>
			<div class="guang">
				<Nav />
			</div>
			<div class="d-flex jc-center">
				<div class="title">
					<span class="title-text">大豆种植管理平台</span>
				</div>
			</div>
		</div>
		<!-- 头部 e-->
		<div class="contents" v-if="pageFlag">
			<div class="contetn_left">
				<ItemWrap class="contetn_left-top contetn_lr-item" title="育成品种一">
					<InfoCard :info='breedList[0]' />
				</ItemWrap>
				<ItemWrap class="contetn_left-center contetn_lr-item" title="育成品种二">
					<InfoCard :info='breedList[1]' />
				</ItemWrap>
				<ItemWrap class="contetn_left-bottom contetn_lr-item" title="育成品种三" style="padding: 0 10px 16px 10px">
					<InfoCard :info='breedList[2]' />
				</ItemWrap>
			</div>
			<div class="contetn_center">
				<CenterMap class="contetn_center_top" />
				<ItemWrap class="contetn_center-bottom" title="大豆生长发育图">
					<Period />
				</ItemWrap>
			</div>
			<div class="contetn_right">
				<ItemWrap class="contetn_left-bottom contetn_lr-item" title="育成品种六">
					<InfoCard :info='breedList[5]' />
				</ItemWrap>
				<ItemWrap class="contetn_left-bottom contetn_lr-item" title="育成品种五" style="padding: 0 10px 16px 10px">
					<InfoCard :info='breedList[4]' />
				</ItemWrap>
				<ItemWrap class="contetn_left-bottom contetn_lr-item" title="育成品种四 ">
					<InfoCard :info='breedList[3]' />
				</ItemWrap>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		currentGET
	} from 'api/modules'
	import CenterMap from "./center-map.vue";
	import Period from "./period.vue";

	export default {
		components: {
			CenterMap,
			Period,
		},
		data() {
			return {
				pageFlag: false,
				breedList: []
			};
		},
		filters: {
			numsFilter(msg) {
				return msg || 0;
			},
		},
		created() {
			this.getData()
		},
		mounted() {},
		methods: {
			getData() {
				currentGET("breed").then((res) => {
					if (res.flag) {
						this.pageFlag = true;
						this.breedList = res.data
					} else {
						this.pageFlag = false;
						this.$Message.warning(res.msg);
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	// 内容
	.contents {

		.contetn_left,
		.contetn_right {
			width: 540px;
			box-sizing: border-box;
			// padding: 16px 0;
		}

		.contetn_center {
			width: 720px;
		}

		//左右两侧 三个块
		.contetn_lr-item {
			height: 310px;
		}

		.contetn_center_top {
			width: 100%;
		}

		// 中间
		.contetn_center {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.contetn_center-bottom {
			height: 315px;
		}

		//左边 右边 结构一样
		.contetn_left,
		.contetn_right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;


		}
	}


	@keyframes rotating {
		0% {
			-webkit-transform: rotate(0) scale(1);
			transform: rotate(0) scale(1);
		}

		50% {
			-webkit-transform: rotate(180deg) scale(1.1);
			transform: rotate(180deg) scale(1.1);
		}

		100% {
			-webkit-transform: rotate(360deg) scale(1);
			transform: rotate(360deg) scale(1);
		}
	}
</style>
